<template>
  <div>
    <div>
      <el-container class="home">
        <el-header>
          <el-button type="primary" @click="signout">退出</el-button>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <!-- 一个结构是由el-menu包裹的 -->
            <el-menu
              background-color="#99ccff"
              text-color="#fff"
              active-text-color="#696969"
              :router=true
            
            >
              <!-- default-active="roles" -->
              <el-submenu
                :index="item.id + ''"
                v-for="item in menuList"
                :key="item.id"
              >
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item
                  :index="subItem.path"
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  >{{subItem.authName}}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: {},
    };
  },
  created() {
    this.getMenu();
  },
  methods: {
    // 获取左侧菜单
    async getMenu() {
      await this.$http
        .get("http://127.0.0.1:8888/api/private/v1/menus")
        .then((res) => {
          if (res.data.meta.status != 200) {
            return this.$message.error("获取列表失败");
          } else {
            var a = (this.menuList = res.data.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    signout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
